<template>
    <el-card>
        <div slot="header">
            <h3>同类型产品推荐</h3>
        </div>
        <div class="recProList">
            <router-link :to="{ name: 'productsDetails', params: { id: item.id } }" class="item" v-for="item in list"
                :key="item.id">
                <el-image :src="item.thumb" lazy></el-image>
                <div class="title">
                    <h4 class="text-hide">{{ item.title }}</h4>
                </div>
                <el-button type="danger" :plain="!isInComparison(item)" size="mini"
                    @click="handleClick(item)">加入对比</el-button>
            </router-link>
            <template v-if="!list.length">
                <el-empty description="暂无推荐产品"></el-empty>
            </template>
        </div>
    </el-card>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getCatGoods } from "@/api/apis"
export default {
    name: "btns",
    props: {
        goods_id: {
            type: [Number, String],
            required: true,
            default: () => 0
        }
    },
    computed: {
        ...mapState('comparison', ['prods', 'max']),
        comparisonTotal () {
            return this.$store.getters['comparison/getProds']
        }
    },
    data () {
        return {
            total: 0,
            list: []
        }
    },
    mounted () {
        this.total === 0 && this.getList()
    },
    methods: {
        ...mapMutations('comparison', ['addComparison', 'deleteComparison']),
        handleClick (item) {
            if (item.checked) {
                this.deleteComparison(item);
                return;
            }
            if (this.comparisonTotal >= 5) {
                this.item.checked = false
                return this.$message.error(`最多只能对比 ${this.max} 个产品`)
            }
            this.addComparison(item)
        },
        // 当前产品是否存在于对比列表中
        isInComparison (item) {
            const val = this.prods.some(prod => prod.id === item.id)
            item.checked = val
            return val
        },
        // 获取推荐商品
        getList () {
            //if (!this.goods_id) return;
            //if (Number(this.goods_id)) return;
            getCatGoods({ goods_id: this.goods_id }).then(res => {
                if (res.code === 1) {
                    this.list = res.data;
                    this.total = res.data.length;
                    // 给推荐商品添加 checked 属性
                    this.list.forEach(item => {
                        item.checked = false
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-card__header {
    border-bottom: none;
    padding-bottom: 0;
}
/deep/.el-card__body {
    padding-top: 0;
}
.recProList {
    .item {
        display: block;
        padding: 15px 10px;
        text-align: center;
        text-decoration: none;

        &:not(:last-child) {
            border-bottom: 1px solid rgba(46, 48, 51, .1)
        }

        /deep/.el-image {
            width: 140px;
            height: 140px;
            border-radius: 4px;
            overflow: hidden;

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 4px;
            }
        }

        .title {
            margin: 10px 0;

            h4 {
                margin: 0;
                color: #2E3033;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
            }
        }
    }
}
</style>